<template>
  <Header />
  <img
    style="margin: 20px 0"
    src="https://cdn3.saikr.com/img/news-inform-banner.jpg"
    alt=""
  />
  <div class="container">
    <el-divider content-position="left"
      >全部消息({{ messageCount }})</el-divider
    >
    <el-card>
      <div class="content" v-for="item in messages" :key="item.id">
        <el-divider></el-divider>
        <div class="content-text">
          <img
            style="width: 35px; height: auto; margin-right: 10px"
            src="@/assets/image/0165cb5d14565ca8012155290a6d86.png@2o.png"
            alt=""
          />
          <p style="color: #333; margin-right: 50px" class="title">
            慧谷管理员
          </p>
          <svg
            v-if="item.status == 1"
            t="1726211597922"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1497"
            width="32"
            height="32"
          >
            <path
              d="M256 256h512c141.3888 0 256 114.6112 256 256s-114.6112 256-256 256H256C114.6112 768 0 653.3888 0 512s114.6112-256 256-256z m252.416 352.256c-54.4256-21.8112-97.7152-54.1952-129.92-97.2032h124.8v-22.1952h-133.1968v-56.3968h116.7104v-22.2208h-116.7104v-51.3024h-23.3984v51.3024H231.1936v22.2208h115.5072v56.3968H213.504v22.1952h123.904c-31.488 40.0896-74.4192 74.3936-128.7168 102.912 7.0144 7.9872 12.416 14.6944 16.2048 20.096 50.816-29.9008 91.392-65.024 121.8048-105.3184v125.1072h23.3984v-125.3888c28.3136 41.6768 68.8128 75.6992 121.4976 101.9904 5.6064-8.0128 11.2128-15.4112 16.7936-22.1952z m92.0832-162.6112v20.992h182.7072l-3.328 36.3008c8.2176 0.2048 15.9232 0.7168 23.1168 1.536l3.584-58.8288h-91.776v-30.0032h85.7856v-20.992h-85.7856v-34.816h-22.784v34.816H611.584v20.992h80.384v30.0032h-91.4944z m-2.4064 106.8032v20.992h103.5008c-13.0048 25.6-48.4864 46.208-106.496 61.7984 5.6064 7.424 10.5984 14.592 15.0016 21.6064 48.5888-14.3872 81.92-32.512 99.8912-54.272a2072.7808 2072.7808 0 0 1 84.608 50.9696l15.0016-20.4032a2850.8416 2850.8416 0 0 0-87.9104-49.1776c1.6128-3.2 3.0976-6.7072 4.5056-10.496h84.3008v-20.992h-79.7952c2.9952-14.4128 4.1984-40.4224 3.584-78.0288h-22.784c0.9984 35.584-0.512 61.5936-4.5056 78.0032h-108.9024z m11.1104 29.696c-13.0048 9.3952-24.4992 17.5104-34.5088 24.32v-142.208h-58.496v21.6064h35.9936v116.096c0 11.1872-3.3792 19.7888-10.1888 25.7792l13.7984 19.8144c15.0016-12.0064 33.5104-25.088 55.5008-39.296-1.024-8.192-1.6896-16.896-2.0992-26.112z m-58.2144-214.784l-18.2784 15.0016a891.136 891.136 0 0 1 43.1872 50.3808l20.7104-17.1008a1190.1952 1190.1952 0 0 0-45.6192-48.2816z m59.6992 151.1936c19.8144 10.1888 37.8112 20.48 54.016 30.8992l11.6992-17.9968a754.9696 754.9696 0 0 0-54.912-29.1072l-10.8032 16.2048z m21.9136-32.6912c18.4064 9.3952 36.096 19.3792 53.0944 29.9776l12.0064-18.2784a1129.472 1129.472 0 0 0-54.016-28.2112l-11.0848 16.512z"
              fill="#FF3B30"
              p-id="1498"
            ></path>
          </svg>
          <br />
        </div>
        <p
          v-html="item.tangible"
          class="content-desc"
          style="margin-top: 20px"
        ></p>
        <div class="time">
          <span class="times">消息时间: {{ item.sendTime }}</span>
          <p class="now" @click="now(item)">&nbsp;我已知晓~</p>
          <!-- <p class="remove">删除</p> -->
        </div>
      </div>
      <!-- <div class="content">
    <Header />
    <img style="margin: 20px 0" src="https://cdn3.saikr.com/img/news-inform-banner.jpg" alt="" />
    <div class="container">
        <el-divider content-position="left">全部消息({{ messageCount }})</el-divider>
        <el-card>
            <div class="content" v-for="item in messages" :key="item.id">
                <el-divider></el-divider>
                <div class="content-text">
                    <img
                        style="width: 35px; height: auto; margin-right: 10px"
                        src="@/assets/image/0165cb5d14565ca8012155290a6d86.png@2o.png"
                        alt=""
                    />
                    <p style="color: #333; margin-right: 50px" class="title">慧谷管理员</p>
                    <svg
                        v-if="item.status == 1"
                        t="1726211597922"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1497"
                        width="32"
                        height="32"
                    >
                        <path
                            d="M256 256h512c141.3888 0 256 114.6112 256 256s-114.6112 256-256 256H256C114.6112 768 0 653.3888 0 512s114.6112-256 256-256z m252.416 352.256c-54.4256-21.8112-97.7152-54.1952-129.92-97.2032h124.8v-22.1952h-133.1968v-56.3968h116.7104v-22.2208h-116.7104v-51.3024h-23.3984v51.3024H231.1936v22.2208h115.5072v56.3968H213.504v22.1952h123.904c-31.488 40.0896-74.4192 74.3936-128.7168 102.912 7.0144 7.9872 12.416 14.6944 16.2048 20.096 50.816-29.9008 91.392-65.024 121.8048-105.3184v125.1072h23.3984v-125.3888c28.3136 41.6768 68.8128 75.6992 121.4976 101.9904 5.6064-8.0128 11.2128-15.4112 16.7936-22.1952z m92.0832-162.6112v20.992h182.7072l-3.328 36.3008c8.2176 0.2048 15.9232 0.7168 23.1168 1.536l3.584-58.8288h-91.776v-30.0032h85.7856v-20.992h-85.7856v-34.816h-22.784v34.816H611.584v20.992h80.384v30.0032h-91.4944z m-2.4064 106.8032v20.992h103.5008c-13.0048 25.6-48.4864 46.208-106.496 61.7984 5.6064 7.424 10.5984 14.592 15.0016 21.6064 48.5888-14.3872 81.92-32.512 99.8912-54.272a2072.7808 2072.7808 0 0 1 84.608 50.9696l15.0016-20.4032a2850.8416 2850.8416 0 0 0-87.9104-49.1776c1.6128-3.2 3.0976-6.7072 4.5056-10.496h84.3008v-20.992h-79.7952c2.9952-14.4128 4.1984-40.4224 3.584-78.0288h-22.784c0.9984 35.584-0.512 61.5936-4.5056 78.0032h-108.9024z m11.1104 29.696c-13.0048 9.3952-24.4992 17.5104-34.5088 24.32v-142.208h-58.496v21.6064h35.9936v116.096c0 11.1872-3.3792 19.7888-10.1888 25.7792l13.7984 19.8144c15.0016-12.0064 33.5104-25.088 55.5008-39.296-1.024-8.192-1.6896-16.896-2.0992-26.112z m-58.2144-214.784l-18.2784 15.0016a891.136 891.136 0 0 1 43.1872 50.3808l20.7104-17.1008a1190.1952 1190.1952 0 0 0-45.6192-48.2816z m59.6992 151.1936c19.8144 10.1888 37.8112 20.48 54.016 30.8992l11.6992-17.9968a754.9696 754.9696 0 0 0-54.912-29.1072l-10.8032 16.2048z m21.9136-32.6912c18.4064 9.3952 36.096 19.3792 53.0944 29.9776l12.0064-18.2784a1129.472 1129.472 0 0 0-54.016-28.2112l-11.0848 16.512z"
                            fill="#FF3B30"
                            p-id="1498"
                        ></path>
                    </svg>
                    <br />
                </div>
                <p v-html="item.tangible" class="content-desc" style="margin-top: 20px"></p>
                <div class="time">
                    <span class="times">消息时间: {{ item.sendTime }}</span>
                    <p class="now" @click="now(item)">&nbsp;我已知晓~</p>
                    <p class="remove">删除</p>
                </div>
            </div>
            <!-- <div class="content">
        <el-divider></el-divider>
        <div class="content-text">
          <img
            style="width: 35px; height: auto; margin-right: 10px"
            src="@/assets/image/0165cb5d14565ca8012155290a6d86.png@2o.png"
            alt=""
          />
          <p style="color: #333" class="title">
            您发布的竞赛 【校园程序设计大赛】已经审核完成，请前往最新竞赛查看
          </p>
          <br />
        </div>
        <p class="content-desc" style="margin-top: 20px">
          重要通知：全国大学生英语作文大赛报名倒计时3小时，请同学注意时间节点。切勿错过作品提交，丧失证书获取资格。本场竟赛证书均为纸质版(包括参赛证书)，如参赛请及时前往大赛官网缴费并下载赛题，合理安排时间！
          作品提交截止时间:2024年6月14日中午12点
        </p>
        <div class="time">
          <span>消息时间: 2024-05-01</span>
          <p>删除</p>
        </div>
      </div>
      <div class="content">
        <el-divider></el-divider>
        <div class="content-text">
          <img
            style="width: 35px; height: auto; margin-right: 10px"
            src="@/assets/image/0165cb5d14565ca8012155290a6d86.png@2o.png"
            alt=""
          />
          <p style="color: #333" class="title">
            您发布的竞赛 【校园程序设计大赛】已经审核完成，请前往最新竞赛查看
          </p>
          <br />
        </div>
        <p class="content-desc" style="margin-top: 20px">
          重要通知：全国大学生英语作文大赛报名倒计时3小时，请同学注意时间节点。切勿错过作品提交，丧失证书获取资格。本场竟赛证书均为纸质版(包括参赛证书)，如参赛请及时前往大赛官网缴费并下载赛题，合理安排时间！
          作品提交截止时间:2024年6月14日中午12点
        </p>
        <div class="time">
          <span>消息时间: 2024-05-01</span>
          <p>删除</p>
        </div>
      </div>
      <div class="content">
        <el-divider></el-divider>
        <div class="content-text">
          <img
            style="width: 35px; height: auto; margin-right: 10px"
            src="@/assets/image/0165cb5d14565ca8012155290a6d86.png@2o.png"
            alt=""
          />
          <p style="color: #333" class="title">
            您发布的竞赛 【校园程序设计大赛】已经审核完成，请前往最新竞赛查看
          </p>
          <br />
        </div>
        <p class="content-desc" style="margin-top: 20px">
          重要通知：全国大学生英语作文大赛报名倒计时3小时，请同学注意时间节点。切勿错过作品提交，丧失证书获取资格。本场竟赛证书均为纸质版(包括参赛证书)，如参赛请及时前往大赛官网缴费并下载赛题，合理安排时间！
          作品提交截止时间:2024年6月14日中午12点
        </p>
        <div class="time">
          <span>消息时间: 2024-05-01</span>
          <p>删除</p>
        </div>
      </div> -->
        </el-card>
    </div>
</template>

<script setup>
import { computed, ref, onMounted } from "vue";
import { messageList, updateMessageStatus } from "@/api/user";
import { ElMessage } from "element-plus";

let messageCount = ref(0);
let notReadConut = ref(0);
let messages = ref([]);

onMounted(async () => {
    const res = await messageList();
    messageCount.value = res.data.data.messageList.length;
    notReadConut.value = res.data.data.notReadNum;
    messages.value = res.data.data.messageList;
});

async function now(item) {
    item.status = 0;
    const result = await updateMessageStatus(item.id);
    if (result.data.code == 200) {
        console.log(123);
        await messageList();
    }
}
</script>

<style lang="scss" scoped>
.container {
    width: 1200px;
    height: 500px;
    .content-text {
        display: flex;
        align-items: center;
    }
    .content-desc {
        color: #666;
    }
    .time {
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        color: #333;
        cursor: pointer;
    }
    .times {
        cursor: pointer;
        &:hover {
            color: skyblue;
        }
    }
    .now {
        padding: 5px;
        border: 1px solid #666;
        color: #666;
        border-radius: 15px;
    }
}
</style>
